<script setup lang="ts">
import type { CascaderNodeModel } from '..'
import Error from '~icons/icons/failed'
import AnalysisOff from '~icons/icons/node-analysis-off'
import AnalysisOn from '~icons/icons/node-analysis-on'
import Init from '~icons/icons/node-init'
import Normal from '~icons/icons/node-normal'
import Stop from '~icons/icons/node-stop'
import Warn from '~icons/icons/warning'
// 节点正常 节点异常 节点停止 开启缓存 关闭缓存 302节点
type IconType =
  | 'NODE_NORMAL'
  | 'NODE_WARN'
  | 'NODE_STOP'
  | 'NODE_ERROR'
  | 'NODE_INIT'
  | 'NODE_ANALYSIS_ON'
  | 'NODE_ANALYSIS_OFF'
// | 'NODE_CACHE_ON'
// | 'NODE_CACHE_OFF'
interface IStatusItem {
  status: IconType
  content: string
  icon: any
}
const props = defineProps<{ node: CascaderNodeModel }>()

/**
 * run_status:  1: 运行; 2: 异常; 3: 停止; 4: 离线 5：初始化
 * resolve_status:1: 已解析; 0|2: 未解析
 * cache_switch：1: 开; 2: 关
 * node_type:1: 普通 cdn 节点; 2: 参与 302 调度的 cdn 节点
 */
const getIconTypes = computed<IconType[]>(() => {
  const res: IconType[] = []
  if (props.node.run_status === 1) {
    res.push('NODE_NORMAL')
  } else if (props.node.run_status === 2) {
    res.push('NODE_WARN')
  } else if (props.node.run_status === 3) {
    res.push('NODE_STOP')
  } else if (props.node.run_status === 4) {
    res.push('NODE_ERROR')
  } else if (props.node.run_status === 5) {
    res.push('NODE_INIT')
  }
  props.node.resolve_status
  && props.node.level === 1
  && res.push(
    props.node.resolve_status === 1 ? 'NODE_ANALYSIS_ON' : 'NODE_ANALYSIS_OFF',
  )
  // res.push(props.node.cache_switch === 1 ? 'NODE_CACHE_ON' : 'NODE_CACHE_OFF')
  // if (props.node.node_type === 2) {
  //   res.push('NODE_302')
  // }
  return res
})
const statusData = ref<IStatusItem[]>([
  {
    status: 'NODE_NORMAL',
    content: '节点状态：运行',
    icon: h(Normal),
  },
  {
    status: 'NODE_WARN',
    content: '节点状态：异常',
    icon: h(Warn),
  },
  {
    status: 'NODE_ERROR',
    content: '节点状态：离线',
    icon: h(Error),
  },
  {
    status: 'NODE_STOP',
    content: '节点状态：停止',
    icon: h(Stop),
  },
  {
    status: 'NODE_INIT',
    content: '初始化',
    icon: h(Init),
  },
  {
    status: 'NODE_ANALYSIS_ON',
    content: '已解析',
    icon: h(AnalysisOn),
  },
  {
    status: 'NODE_ANALYSIS_OFF',
    content: '未解析',
    icon: h(AnalysisOff),
  },
])
</script>

<template>
  <div class="node-status__wrapper">
    <!-- 节点正常  -->
    <div
      v-for="item in statusData"
      v-show="getIconTypes.includes(item.status)"
      :key="item.status"
    >
      <a-tooltip
        placement="top"
        trigger="hover"
      >
        <template #content>
          {{ item.content }}
        </template>
        <component :is="item.icon" />
      </a-tooltip>
    </div>
    <!--
      <div class="node-status">
        <div class="node-status__content cascader-tooltip">
          {{ item.content }}
        </div>
        <component :is="item.icon" />
      </div> -->
    <!-- 开启缓存 -->
    <!--
    <div v-if="getIconTypes.includes('NODE_CACHE_ON')" class="node-status">
      <svg
        width="12"
        height="12"
        viewBox="0 0 12 12"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <rect width="12" height="12" rx="6" fill="#00BF71" />
        <path
          d="M6 7.125C4.55025 7.125 3.375 6.62138 3.375 6C3.375 5.79413 3.51337 5.60363 3.73912 5.4375C4.19362 5.77238 5.03062 6 6 6C6.969 6 7.806 5.77238 8.26088 5.4375C8.48625 5.60363 8.625 5.79413 8.625 6C8.625 6.62138 7.44975 7.125 6 7.125ZM6 5.25C4.55025 5.25 3.375 4.74637 3.375 4.125C3.375 3.50363 4.55025 3 6 3C7.44975 3 8.625 3.50363 8.625 4.125C8.625 4.74637 7.44975 5.25 6 5.25ZM3.73912 7.3125C4.19362 7.64738 5.03062 7.875 6 7.875C6.969 7.875 7.806 7.64738 8.26088 7.3125C8.48625 7.47862 8.625 7.66913 8.625 7.875C8.625 8.49638 7.44975 9 6 9C4.55025 9 3.375 8.49638 3.375 7.875C3.375 7.66913 3.51337 7.47862 3.73912 7.3125Z"
          fill="white" />
      </svg>
      <div class="node-status__content cascader-tooltip">开启缓存</div>
    </div>
    -->
    <!-- 关闭缓存 -->
    <!--
    <div v-if="getIconTypes.includes('NODE_CACHE_OFF')" class="node-status">
      <div class="node-status__content cascader-tooltip">关闭缓存</div>
      <svg
        width="12"
        height="12"
        viewBox="0 0 12 12"
        fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <rect width="12" height="12" rx="6" fill="#BFC2C7" />
        <path
          d="M6 7.125C4.55025 7.125 3.375 6.62138 3.375 6C3.375 5.79413 3.51337 5.60363 3.73912 5.4375C4.19362 5.77238 5.03062 6 6 6C6.969 6 7.806 5.77238 8.26088 5.4375C8.48625 5.60363 8.625 5.79413 8.625 6C8.625 6.62138 7.44975 7.125 6 7.125ZM6 5.25C4.55025 5.25 3.375 4.74637 3.375 4.125C3.375 3.50363 4.55025 3 6 3C7.44975 3 8.625 3.50363 8.625 4.125C8.625 4.74637 7.44975 5.25 6 5.25ZM3.73912 7.3125C4.19362 7.64738 5.03062 7.875 6 7.875C6.969 7.875 7.806 7.64738 8.26088 7.3125C8.48625 7.47862 8.625 7.66913 8.625 7.875C8.625 8.49638 7.44975 9 6 9C4.55025 9 3.375 8.49638 3.375 7.875C3.375 7.66913 3.51337 7.47862 3.73912 7.3125Z"
          fill="white" />
      </svg>
    </div>
   -->
  </div>
</template>

<style scoped lang="less">
.node-status__wrapper {
  display: flex;
  align-items: center;
  gap: 4px;

  .node-status {
    position: relative;
    height: 12px !important;
    .node-status__content {
      top: 50%;
      left: 16px;
      &::before {
        top: calc(50%);
        left: -5px;
      }
    }
    &:hover {
      .node-status__content {
        display: block;
        opacity: 1 !important;
      }
    }
  }
}
</style>
